<template>
  <div class="app-container">
    <h2 class="con-title">导入失败详情</h2>
    <div class="btn-box">
    </div>
    <div class="source">
      <div class="input-line">
        <div class="input-inline">
          <label class="input-label">商品货号：</label>
          <div class="el-input" style="width:180px">
            <input type="text" autocomplete="off" placeholder="请输入内容" class="el-input__inner" v-model="listQuery.goodsCode">
          </div>
        </div>
      </div>
      <el-button type="primary" icon="el-icon-search" style="position: absolute;top:20px;right:20px;" size="small" @click="searchSubmit">搜索</el-button>
    </div>
    <!--<div class="btn-box">
      <div>
        <el-button type="primary" size="mini" @click="importStock">一键导入</el-button>
        <el-button type="primary" icon="el-icon-download" size="mini" @click="exportStockRecord" :loading="downloadLoading">批量导出</el-button>
      </div>
    </div>-->
    <el-table :data="list" ref="tableData" v-loading.body="listLoading" stripe element-loading-text="Loading" border highlight-current-row @row-click="rowChecked" @selection-change="handleSelectionChange">
      <!--<el-table-column type="selection" width="55">
      </el-table-column>-->
      <el-table-column align="center" label='商品货号'>
        <template slot-scope="scope">
          {{scope.row.goodsCode}}
        </template>
      </el-table-column>
      <el-table-column align="center" label='商品尺码'>
        <template slot-scope="scope">
          {{scope.row.sizeName}}
        </template>
      </el-table-column>
      <el-table-column label="商品品牌" align="center">
        <template slot-scope="scope">
          {{scope.row.goodsBrand}}
        </template>
      </el-table-column>
      <el-table-column align="center" label='上传时间'>
        <template slot-scope="scope" v-if="scope.row.createDate!=null">
          <!--<i class="el-icon-time"></i>-->
          {{scope.row.createDate| formatDate( 'yyyy-MM-dd hh:mm')}}
        </template>
      </el-table-column>
      <el-table-column label="失败原因" align="center">
        <template slot-scope="scope">
          {{scope.row.remark}}
        </template>
      </el-table-column>
      <!--<el-table-column class-name="status-col" label="当前状态" align="center" :render-header="changeHeader" show-overflow-tooltip>
        <template slot-scope="scope">
          <span style="color:#0099FF;">{{scope.row.currentStatus|currentStatus}}</span>
        </template>
      </el-table-column>-->
    </el-table>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.pageIndex" :page-sizes="[10, 20, 30, 40]" :page-size="listQuery.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>
  </div>
</template>

<script>
import {
  getStockRecordDetailsList
} from '@/api/list'
import {
  exportStockRecord
} from '@/api/list'
import {
  importStockRecordDetails
} from '@/api/list'

export default {
  data() {
    return {
      currentPage4: 1,
      total: 100,
      listQuery: {
        pageIndex: 1,
        pageSize: 20,
        filesId: this.$route.query.filesId,
        goodsCode: '',
        currentStatus: null
      },
      recordId: '',
      dialogVisible: false,
      list: null,
      listLoading: true,
      downloadLoading: false
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    // 列表加载
    fetchData() {
      this.listLoading = true
      getStockRecordDetailsList(this.listQuery).then(res => {
        this.list = res.data.stockRecordDetailsList
        this.total = res.data.total
        this.listLoading = false
      })
    },
    searchSubmit() {
      this.listQuery.pageIndex = 1
      if (this.listQuery.currentStatus === '') {
        this.listQuery.currentStatus = null
      }
      this.fetchData()
    },
    rowChecked(row, event, column) {
      this.$refs.tableData.toggleRowSelection(row)
    },
    handleSelectionChange(val) {
      const me = this
      this.recordId = ''
      val.forEach(function(ele) {
        me.recordId += ele.id + ','
      })
    },
    importStock() {
      if (this.recordId === '') {
        this.$message({
          message: '请选择需要导入的商品',
          type: 'error'
        })
      } else {
        console.log(this.$route.query.filesId + '  ' + this.recordId)
        importStockRecordDetails({ filesId: this.$route.query.filesId, recordId: this.recordId }).then(res => {
          this.$message.success(res.info)
          this.fetchData()
        })
      }
    },
    // 下载商品库存
    exportStockRecord() {
      this.downloadLoading = true
      exportStockRecord({ filesId: this.$route.query.filesId }).then(res => {
        location.href = res.data.fileUrl
        this.downloadLoading = false
        this.$message({
          message: '操作成功',
          type: 'success'
        })
      })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.listQuery.pageSize = val
      this.fetchData()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.listQuery.pageIndex = val
      this.fetchData()
    },
    // 自定义表头
    changeHeader(h, { column }) {
      return (
        <el-tooltip
          class='item'
          effect='dark'
          placement='top'
        >
          <div slot='content'>不可导入：头号买手平台商品信息缺失，导致库存数据无法导入。<br/>可再次导入：头号买手平台商品信息已补充完整，可再次导入。<br/>已导入：由于平台商品信息缺失，首次导入失败，在平台补充商品信息后，通过【一键导入】操作再次导入的数据状态为已导入。</div>
          <span>{column.label}<i class='el-icon-info' style='margin-left: 5px;'></i></span>
        </el-tooltip>
      )
      // return h('span', {}, [
      //   h('span', column.label),
      //   h('el-tooltip', {}, [
      //     h('div',
      //       {
      //         slot: 'content'
      //       }, '不可导入：头号买手平台商品信息缺失，导致库存数据无法导入。可再次导入：头号买手平台商品信息已补充完整，可再次导入。已导入：由于平台商品信息缺失，首次导入失败，在平台补充商品信息后，通过【一键导入】操作再次导入的数据状态为已导入。'),
      //     h('i',
      //       {
      //         style: 'margin-left: 5px;',
      //         class: 'el-icon-info'
      //       })
      //   ])
      // ])
    }
  }
}

</script>
<style rel="stylesheet/scss" lang="scss">
@import 'src/assets/css/jx-order.scss';
</style>
